<template>
  <Nav>
    {{ $t('token.nav') }}
  </Nav>
  <div class="page-token">
    <div class="nav"></div>
    <div class="header">
      <div class="name">{{ $t('token.name') }}</div>
      <div class="my">
        <md-amount :value="Number(userData.hw_token)" transition></md-amount>
      </div>
    </div>
    <div class="content">
      <div class="box">
        <md-tab-bar v-model="tabs" :items="tabsItems"></md-tab-bar>
        <Transfer v-if="tabs == 0" />
        <Take v-if="tabs == 1" />
        <Fill v-if="tabs == 2" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { toast } from '@/style'
import { t } from '@/lang'
import { userData } from '@/model/user'
import Nav from '@/components/nav.vue'
import Transfer from './transfer.vue'
import Take from './take.vue'
import Fill from './fill.vue'

const tabs = ref(0)
const tabsItems = [
  { name: 0, label: t('token.transfer') },
  { name: 1, label: t('token.take') },
  { name: 2, label: t('token.fill') }
]

</script>

<style lang="scss" scoped>
  .page-token{
    min-height: 100%;
    background: url('@/assets/page.jpg') center center no-repeat;
    background-size: cover;

    .nav{
      height: 80px;
    }
    .header{
      width: 300px;
      height: 160px;
      background: url('@/assets/token/header.png') center no-repeat;
      background-size: 100%;
      margin: 0 auto;

      .name{
        font-size: 16px;
        padding: 60px 20px 0 0;
        color: rgba(255, 255, 255, .7);
        text-align: right;
        font-weight: bold;
      }

      .my{
        font-size: 35px;
        color: #fff;
        padding: 20px 20px 0 0;
        text-align: right;
      }
    }
    .content{
      width: 300px;
      margin: 40px auto 0;
      padding-bottom: 40px;
    }

    .box{
      padding-top: 10px;
      overflow: hidden;
      background-image: linear-gradient(to bottom,#2a2f76,#1d0f5e);
      border-radius: 15px;
      box-shadow: 0 10px 20px rgba(0,0,0, .1);
    }
    
    .md-tab-bar{
      background: 0;
    }
    .md-tab-bar-item.is-active{
      color: #fff;
    }
    .md-tab-bar-ink{
      color: #fff;
    }
    
    .md-tab-bar-item{
      color: #fff;
    }
  }
</style>
<style lang="scss">
  .page-token{
    .md-tab-bar{
      background: 0;
    }
    .md-tab-bar-item{
      color: #5d62a7;
    }
    .md-tab-bar-item.is-active{
      color: #fff;
    }
    .md-tab-bar-ink{
      background-color: #fff;
    }
    .md-field{
      background: 0;
    }
    .md-field-item-title{
      color: #5d62a7;
    }
    .md-input-item{
      background: rgba(0, 0, 0, .2);
      border-radius: 5px;
    }
    .md-input-item-input{
      color: #fff;
    }
    .md-field-item-content:before{
      border: 0;
    }
    .md-field-item.is-solid .md-field-item-title{
      text-align: center;
      font-size: 16px;
    }
    .md-button.primary{
      color: #fff;
      background: #5d62a7;
    }
    .md-button.plain.primary:after, .md-button.round:after{
      border: 0;
    }
    .md-button.link{
      color: #5d62a7;
    }
    .md-button .md-icon{
      padding: 0;
    }
  }
</style>